<template>
  <TopNavBar :title="investors?.name" @rightClick="handleRightClick" type="back" right rightType="true" />
  <div style="height: 50px;"></div>
  <div class="ai-follow-person-detail">
    <div style="padding: 16px">
      <div style="position: relative; padding: 16px; background: #fff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04)">
        <img class="avatar" :src="investors?.avatar" />
        <div class="header">
          <div class="desc-box">
            <div class="name">{{ investors?.name }}</div>
            <div class="desc">{{ investors?.bio }}</div>
            <div class="intro">
              The Breakdown is a daily podcast covering major shifts in economies and power around
              the world. Are we entering a period of deflation or inflation? Are the Fed and other
              central banks too involved in the economy? Is the dollar-based global monetary order
              no longer relevant?
            </div>
          </div>
        </div>
        <div class="invest-info">
          <div class="info-item">
            <div class="label">跟投人数</div>
            <div class="value">{{ investors?.followerCount }}</div>
          </div>
          <div class="info-item">
            <div class="label">回报率</div>
            <div class="value">+ {{ investors?.totalReturnRate }} %</div>
          </div>
          <div class="info-item">
            <div class="label">年平均收益</div>
            <div class="value">{{ investors?.annualAvgYield }} %</div>
          </div>
        </div>
      </div>
    </div>
    <div class="recommend-section">
      <div class="section-title">推荐股票</div>
      <div class="stock-list">
        <div class="stock-item" v-for="stock in stocks" :key="stock.code">
          <img class="stock-icon" :src="stock.icon" />
          <div class="stock-info">
            <div class="stock-code">{{ stock.code }}</div>
            <div class="stock-profit" :style="{ color: stock.profit > 0 ? '#0bb07b' : '#f00' }">
              {{ stock.profit > 0 ? '+' : '' }}{{ stock.profit }}%
            </div>
            <div class="stock-desc">参考最高年化</div>
          </div>
        </div>
      </div>
      <div class="more">查看更多 <span class="arrow">›</span></div>
    </div>
    <!-- 收益周期表现 -->
    <div class="chart-section">
      <div class="chart-title">收益週期表現</div>
      <div ref="barChartRef" class="chart-box"></div>
    </div>
    <!-- 收益额 -->
    <div class="chart-section">
      <div class="chart-title">收益額</div>
      <div ref="lineChartRef" class="chart-box"></div>
    </div>
    <!-- 跟单情况 -->
    <div class="order-section">
      <div class="order-title">跟單情況</div>
      <div class="order-card">
        <div class="order-row">
          <div class="order-col">
            <div class="order-label">效益</div>
            <div class="order-value">{{ investors?.currentYield }} %</div>
          </div>
          <div class="order-col">
            <div class="order-label">獲利天數</div>
            <div class="order-value order-green">{{ investors?.winDays }}</div>
          </div>
          <div class="order-col">
            <div class="order-label">虧損天數</div>
            <div class="order-value order-gray">{{ investors?.lossDays }}</div>
          </div>
        </div>
        <div class="order-progress-bar">
          <div class="order-progress-win" :style="{width: '73.3%'}"></div>
          <div class="order-progress-loss" :style="{width: '26.7%'}"></div>
        </div>
        <div class="order-row order-bottom">
          <div class="order-label">跟單人數</div>
        </div>
        <div class="order-row order-bottom">
          <div class="order-label">累計跟單用戶</div>
          <div class="order-value">{{ investors?.followerCount }}</div>
        </div>
        <div class="order-row order-bottom">
          <div class="order-label">近7日人數變化</div>
          <div class="order-value order-green">↑{{ investors?.recent7dNewFollowers }}(+ {{ _toFixed(investors?.recent7dNewFollowers / investors?.followerCount)  * 100 }} %)</div>
        </div>
      </div>
    </div>
    <div style="height: 100px;"></div>
    <div class="reserve-btn-bar">
      <button class="reserve-btn" :class="{ pending: reservePending }" @click="handleReserveClick">
        {{ reservePending ? '预约审核中' : '预约' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { getInvestInfoApi } from '@/api/ai/index'
import { _toFixed } from '@/utils/decimal'
import { getProductListApi, getFollowOrderListApi, submitFollowOrderApi } from '@/api/ai/index'
const route = useRoute()
const router = useRouter()
// const name = route.query.name || 'Nathaniel Whittemore'
// const avatar = route.query.avatar || 'https://randomuser.me/api/portraits/men/1.jpg'
// const desc = route.query.desc || 'Well-known investors'
// const profit = route.query.profit || 65
const id = route.query.id || 0
const investors = ref({})

const stocks = [
  { code: 'XDGF', icon: 'https://img.icons8.com/color/48/000000/stock-share.png', profit: 40.58 },
  { code: 'YGNY', icon: 'https://img.icons8.com/color/48/000000/stock-share.png', profit: 68.68 },
  { code: 'MSZY', icon: 'https://img.icons8.com/color/48/000000/stock-share.png', profit: 39.59 },
  { code: 'TSLA', icon: 'https://img.icons8.com/color/48/000000/tesla-logo.png', profit: 49.98 },
  { code: 'LSGJ', icon: 'https://img.icons8.com/color/48/000000/stock-share.png', profit: 48.31 }
]


const barChartRef = ref(null)
const lineChartRef = ref(null)
const reservePending = ref(false)

function handleReserveClick() {
  console.log(investors.value.id)
  let data = {
    investorId: investors.value.id,
    status: 0
  }
  try {
    const res = submitFollowOrderApi(data)
      .then((res) => {
        if (res.code === 200) {
          if (!reservePending.value) {
            reservePending.value = true
          }
          // orderId.value = res.data.id
          // // handelClose()
          // closeSimpleConfirm()
          // // openConfirmModal()
          // setTimeout(() => {
          //   showConfirmModal.value = true
          //   buyPrice.value = res.data.openPrice
          //   countDown.value = Number(cycleObj.value.period)
          //   overFlag.value = true
          //   isCloseCountdown.value = true
          // }, 1000)
        } else {
          showToast(res.msg)
        }
      })
      .catch((error) => {
        console.log(error)
      })
    
  } catch (error) {}
  
}

const getList = async () => {
  const params = `investorId=${id}&status=0`
  let res = await getFollowOrderListApi(params)

  if (res.code == 200) {
    if (res.data && res.data.length > 0) {
      reservePending.value = true
    }
  }
}

function handleRightClick() {
  router.push({ path: '/aiFollowOrder' })
}

const getInfo = async () => {
  const params = `id=${id}`
  let res = await getInvestInfoApi(params)

  if (res.code == 200) {
    investors.value = res.data
    getList(investors.value.id)
  }
}

onMounted(() => {
  getInfo()
  // 柱状图
  const barChart = echarts.init(barChartRef.value)
  barChart.setOption({
    grid: { left: 20, right: 20, top: 30, bottom: 20 },
    xAxis: {
      type: 'category',
      data: ['近11週', '10週', '9週', '8週', '7週', '6週', '5週', '4週'],
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { color: '#888', fontSize: 12 }
    },
    yAxis: {
      type: 'value',
      splitLine: { lineStyle: { color: '#f2f2f2' } },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { color: '#bbb', fontSize: 12 }
    },
    series: [{
      data: [120, 180, 90, 150, 80, 130, 110, 160],
      type: 'bar',
      barWidth: 18,
      itemStyle: { color: '#0bb07b', borderRadius: [6,6,0,0] }
    }]
  })
  // 折线图
  const lineChart = echarts.init(lineChartRef.value)
  lineChart.setOption({
    grid: { left: 20, right: 20, top: 30, bottom: 20 },
    xAxis: {
      type: 'category',
      data: ['近11週', '10週', '9週', '8週', '7週', '6週', '5週', '4週'],
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { color: '#888', fontSize: 12 }
    },
    yAxis: {
      type: 'value',
      splitLine: { lineStyle: { color: '#f2f2f2' } },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { color: '#bbb', fontSize: 12 },
      min: 0,
      max: 500,
      interval: 100
    },
    series: [{
      data: [120, 150, 90, 200, 170, 140, 180, 160],
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: { color: '#0bb07b', width: 2 },
      areaStyle: { color: 'rgba(11,176,123,0.12)' }
    }]
  })
})
</script>

<style scoped>
.ai-follow-person-detail {
  background: #f6f8fa;
  min-height: 100vh;
  padding-bottom: 24px;
}
.header {
  display: flex;
  align-items: flex-start;
  border-radius: 14px;
  padding: 28px 8px 12px 8px;
}
.avatar {
  position: absolute;
  left: 50%;
  top: -33px;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 18px;
}
.desc-box {
  flex: 1;
}
.name {
  font-size: 18px;
  font-weight: 700;
  color: #222;
}
.desc {
  font-size: 14px;
  color: #888;
  margin-bottom: 6px;
}
.intro {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
  line-height: 1.5;
}
.invest-info {
  display: flex;
  justify-content: space-between;
  border-radius: 14px;
  padding: 16px 0;
  background: #F5F5F5;
}
.info-item {
  flex: 1;
  text-align: center;
}
.label {
  font-size: 13px;
  color: #888;
}
.value {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin-top: 4px;
}
.recommend-section {
  background: #fff;
  border-radius: 14px;
  margin: 12px 16px 0 16px;
  padding: 16px 0 0 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
}
.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin-left: 18px;
  margin-bottom: 8px;
}
.stock-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.stock-item {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid #f2f2f2;
}
.stock-item:last-child {
  border-bottom: none;
}
.stock-icon {
  width: 28px;
  height: 28px;
  margin-right: 12px;
}
.stock-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.stock-code {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  width: 54px;
}
.stock-profit {
  font-size: 15px;
  font-weight: 700;
  width: 70px;
}
.stock-desc {
  font-size: 12px;
  color: #bbb;
}
.more {
  text-align: center;
  color: #888;
  font-size: 14px;
  padding: 12px 0 16px 0;
  cursor: pointer;
}
.arrow {
  font-size: 18px;
  vertical-align: middle;
}
.chart-section {
  background: #f6f8fa;
  padding: 0 16px 0 16px;
}
.chart-title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin: 0 0 8px 0;
  padding-top: 8px;
}
.chart-box {
  width: 100%;
  height: 120px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
  margin-bottom: 16px;
}
.order-section {
  padding: 0 16px 0 16px;
  margin-top: 0;
}
.order-title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin: 0 0 8px 0;
  padding-top: 8px;
}
.order-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
  padding: 16px 16px 8px 16px;
}
.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.order-col {
  flex: 1;
  text-align: center;
}
.order-label {
  font-size: 13px;
  color: #888;
}
.order-value {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin-top: 2px;
}
.order-green {
  color: #0bb07b;
}
.order-gray {
  color: #bbb;
}
.order-progress-bar {
  width: 100%;
  height: 8px;
  background: #f2f2f2;
  border-radius: 6px;
  display: flex;
  overflow: hidden;
  margin: 8px 0 12px 0;
}
.order-progress-win {
  background: #0bb07b;
  height: 100%;
}
.order-progress-loss {
  background: #bbb;
  height: 100%;
}
.order-bottom {
  margin-bottom: 2px;
}
.reserve-btn-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f6f8fa;
  padding: 12px 0 16px 0;
  z-index: 10;
  display: flex;
  justify-content: center;
}
.reserve-btn {
  width: 90vw;
  max-width: 400px;
  height: 48px;
  background: #FF9100;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 24px;
  transition: background 0.2s;
  outline: none;
  cursor: pointer;
}
.reserve-btn.pending {
  background: #555;
  color: #fff;
}
</style>
